<script lang="ts" setup>
    const props = defineProps<{
        letter: string;
        state: "empty" | "exclude" | "include" | "correct";
    }>();
</script>

<template>
    <span
        class="wordle-letter"
        :class="props.state"
    >
        {{ props.letter.toUpperCase() }}
    </span>
</template>

<style scoped lang="scss">
    span.wordle-letter {
        width: 48px;
        height: 48px;
        border: 2px solid #1d2225;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 24px;
        font-weight: bold;
        border-radius: 4px;
        margin-right: 4px;
    }
</style>
